.field {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    &.field--focused .field__wrap .field__wrap-input::after {
        transform: scaleX(1);
    }
    &.field-label-align-top {
        flex-wrap: wrap;
        .field__label {
            width: 100%;
            padding: 5px 2px;
        }
    }
    .field__label {
        display: block;
        padding: 10px 8px;
        font-weight: 500;
        color: color("gray-darken-1");
    }
    .field__wrap {
		width: 100%;
		
        .field__wrap-input {
            position: relative;
            border-radius: 2px;
			
			&::after {
                position: absolute;
                content: "";
                bottom: 0;
                left: 0;
                height: 2px;
                width: 100%;
                background: theme-color("primary");
                transform: scaleX(0);
                transition: transform 0.15s ease-out;
            }
            .field__input {
                padding: 8px 10px;
                width: 100%;
                background: color("white");
                border: 1px solid color("gray-lighten-2");
                border-radius: 3px;
                outline: 0;
                transition: border-color 0.2s ease-out;
            }
        }
    }
}

.field-error-message {
    color: color("red");
    padding: 5px;
    &::before {
        content: "\e001";
        font-family: "materialicon";
        margin-right: 5px;
        font-size: 16px;
        font-weight: 500;
        vertical-align: bottom;
    }
}

.field-trigger {
    position: absolute;
    top: 50%;
    right: 0;
    width: 36px;
    border: 0;
    color: color("gray");
    background: transparent;
    transform: translateY(-50%);
    cursor: pointer;
    &:focus {
        outline: 0;
    }
    &:before {
        font-size: 24px;
    }
}

.field.field--focused~.field-trigger {
    color: theme-color("primary");
}

.field-container {
    &.layout-hbox {
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-end;
    }
}

input,
textarea,
select {
    display: block;
}